<template>
  <div class="box">
    <div class="list_box">
      <div class="list on1">
        <p class="title">当前包间</p>
        <p class="text">{{msg.roomName}}</p>
      </div>
      <div class="list">
        <p class="title">开始时间</p>
        <p class="text">{{msg.startTime}}</p>
      </div>
      <div class="list">
        <p class="title">结束时间</p>
        <p class="text">{{msg.endTime}}</p>
      </div>
    </div>
    <div class="tab_box">
      <p class="name">选择更换的房间</p>
      <div class="nr">
        <div @click="switchClick(item,index)" :class="item.isClick?'box1 on':'box1'" v-for="(item,index) in msg.changeRoomList" :key="index">
          <div v-if="item.status == 2" class="tab_on2">
            <p class="roomName">{{item.roomName}}</p>
            <div class="on_height">
              <p class="status">当前房间</p>
            </div>
          </div>
          <div v-if="item.status == 1" class="tab_on4">
            <p class="roomName">{{item.roomName}}</p>
            <div class="on_height">
              <p class="status">不可换</p>
            </div>
          </div>
          <div v-if="item.status == 0 && item.amountType == 0" class="tab">
            <p class="roomName">{{item.roomName}}</p>
            <p class="status on_height">退款{{item.amount}}元</p>
          </div>

          <div v-if="item.status == 0 && item.amountType == 1" class="tab_on1">
            <p class="roomName">{{item.roomName}}</p>
            <p class="status on_height">补差价{{item.amount}}元</p>
          </div>

          <div v-if="item.status == 0 && item.amountType == 2" class="tab">
            <p class="roomName">{{item.roomName}}</p>
            <div class="on_height">
              <p class="status">同价换房</p>
            </div>
          </div>

          <!-- <p class="roomName">{{item.roomName}}</p>
          <p class="status" v-if="item.status == 0 && item.amountType == 0">退款{{item.amount}}元</p>
          <p class="status" v-if="item.status == 0 && item.amountType == 1">补差价{{item.amount}}元</p>
          <p class="status" v-if="item.status == 0 && item.amountType == 2">同价换房</p>
          <p class="status" v-if="item.status == 2">当前房间</p> -->
        </div>
        <!-- <div class="tab">
          <p class="roomName">应许之地</p>
          <p class="status">退款20.00元</p>
        </div>
        <div class="tab">
          <p class="roomName">应许之地</p>
          <p class="status">退款20.00元</p>
        </div>
        <div class="tab">
          <p class="roomName">应许之地</p>
          <p class="status">退款20.00元</p>
        </div>
        <div class="tab tab_on1">
          <p class="roomName">应许之地</p>
          <p class="status">补差价10.00元</p>
        </div>
        <div class="tab tab_on1">
          <p class="roomName">应许之地</p>
          <p class="status">补差价10.00元</p>
        </div>
        <div class="tab tab_on2">
          <p class="roomName">应许之地</p>
          <p class="status">当前包间</p>
        </div>
        <div class="tab tab_on3">
          <p class="roomName">应许之地</p>
          <p class="status">非营业状态</p>
        </div> -->
      </div>
    </div>
    <div class="play_msg" v-if="isShow">
      <p class="title">请选择支付方式</p>
      <div class="box1">
        <van-radio-group :value="radio" @change="changePlay">

          
          <van-radio name="1" label-position="left">
            <div class="nr">
              <img mode="widthFix" src="/static/images/wx_play.png" alt="">
              <div>
                <p>微信支付</p>
              </div>
            </div>
          </van-radio>
          <van-radio name="2" label-position="left" style="border-bottom:none">
            <div class="nr b_margin">
              <img mode="widthFix" src="/static/images/ye_play.png" alt="">
              <div>
                <p>余额支付({{orderMsg.walletBalance?orderMsg.walletBalance:'0.00'}})</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
        
        
      </div>
    </div>
    <div class="button_box1" v-if="!isShow">
      <div class="box1" :style="{paddingBottom:isIphoneXnum+'px'}">
        <van-button 
          @click="submit"
          :disabled="loading"
          :loading="loading" 
          loading-text="更换中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 690rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >确认更换</van-button>
      </div>
    </div>

    <div v-else class="button_box1" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box1">
        <div class="price_box1">
          <p class="price">
            <span class="totle1">补差价：￥{{roomMsg.amount}}</span>
          </p>
        </div>
        <van-button 
          v-if="radio == '1'"
          @click="submit1(0)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >微信支付</van-button>
        <van-button 
          v-if="radio == '2' && !orderMsg.balancePay"
          @click="submit1(1)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >余额支付</van-button>
        <p v-if="radio == '2' && orderMsg.balancePay" class="button" @click="toCz" >立即充值</p>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getChangeRoom,
  refund,
  getChangeRooWallet,
  changeRoomWalletPay,
  changeRoomWxPay,
  changeRoomRefund
} from "@/api/index";
import { Debounce } from "@/utils/index";
import { getToken,getRefreshToken } from "@/utils/auth";
export default {
  data(){
    return{
      isIphoneXnum:0,
      query:{
        backRemarks:'',
        backPic:[],
        orderId:'',
        refundCause:'请选择退款原因'
      },
      loading:false,
      orderId:'',
      msg:{},
      radio:'1',
      orderMsg:{},
      isShow:false,
      roomMsg:{},
    }
  },
  methods:{

    // 支付
    submit1:Debounce(function (state) {
      wx.showLoading({
        title: '支付中...'
      })
      const that = this;
      this.loading = true
      let data = {
        orderId:this.orderId,
        roomId:this.roomMsg.roomId
      }
      let objReturn = !state ? changeRoomWxPay(data):changeRoomWalletPay(data)
      objReturn.then(item=>{
        if(item.statusCode == '00000'){
          setTimeout(() => {
            if(!state){
              wx.requestPayment({
                timeStamp:item.data.timeStamp,
                nonceStr:item.data.nonce_str,
                package:`prepay_id=${item.data.prepay_id}`,
                signType:"MD5",
                paySign:item.data.sign,
                success:function(succ){
                  console.log(succ)
                  if(succ.errMsg === "requestPayment:ok"){
                    wx.redirectTo({
                      url: `/pages/order_xq/main?orderId=${that.orderId}`,
                    });            
                  }
                },
                fail:function(err){
                  that.loading = false
                  wx.hideLoading()
                  that.$toast('支付失败！')
                }
              })
              return
            }
            that.loading = false
            wx.redirectTo({
              url: `/pages/order_xq/main?orderId=${that.orderId}`,
            });    
          }, 1000); 
        }else{
          that.loading = false
          wx.hideLoading()
          that.$toast(item.message)
        }
      }).catch(err=>{
        wx.hideLoading()
        that.loading = false
        that.$toast('支付失败，请重新发起支付~')
      })
    },300),

    // 选择支付方式
    changePlay(e){
      console.log(e)
      this.radio = e.mp.detail
    },

    // 切换
    switchClick(item,index){
      if(item.status == 2 || item.status == 1){
        return
      }
      this.roomMsg = item
      let list = Object.assign([],this.msg.changeRoomList)
      list.map(it=>{
        it.isClick = false
      })
      if(item.status == 0 && item.amountType == 1){
        this.isShow = true
        this.getPlayMsg()
      }else{
        this.isShow = false
      }

      if(item.isClick){
        list[index].isClick = false
      }else{
        list[index].isClick = true
      }

      this.msg.changeRoomList = list
    },

    // 获取支付信息
    getPlayMsg(){
      let data = {
        orderId:this.orderId,
        roomId:this.roomMsg.roomId
      }
      getChangeRooWallet(data).then(res=>{
        if(res.statusCode == '00000'){
          this.orderMsg = res.data
        }
      })
    },
    
    // 获取换房信息
    getMsg(){
      getChangeRoom({orderId:this.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          res.data.changeRoomList.map(item=>{
            item.isClick = false
          })
          this.msg = res.data
        }
      })
    },

    // 提交
    submit(){
      this.$showLoading('更换中...')
      this.loading = true
      let data = {
        orderId:this.orderId,
        roomId:this.roomMsg.roomId
      }
      changeRoomRefund(data).then(res=>{
        if(res.statusCode == '00000'){
          wx.redirectTo({
            url: `/pages/order_xq/main?orderId=${this.orderId}`,
          }); 
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },

 


    
  },
  onShow(){
    this.loading = false
  },
  onLoad(options){
    console.log(options)
    this.orderId = options.orderId
    this.getMsg()
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  }
}
</script>

<style lang="scss" scoped>
.box{
  min-height: 100vh;
  background: #F5F5F5;
  padding-top:24rpx;
  .list_box{
    margin:0 32rpx;
    background: #fff;
    box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(30,53,88,0.02);
    border-radius: 16rpx;
    .list{
      display: flex;
      justify-content: space-between;
      min-height: 88rpx;
      align-items: center;
      border-bottom:1px solid #F2F1F4;
      margin-left:32rpx;
      &:last-child{
        border-bottom:none;
      }
      .title{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #666666;
      }
      .text{
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #111111;
        margin-right:32rpx;
      }
      &.on1{
        border-bottom:none;
        background: linear-gradient(158deg, #D6FFD6 0%, #FFFFFF 28%, #D8FFD8 100%, #88F388 100%);
        padding:0 32rpx;
        border-top-right-radius: 16rpx;
        border-top-left-radius: 16rpx;
        margin-left:0;
        .text{
          margin-right:0;
        }
      }
      &.on{
        display: block;
        border-bottom:none;
        .title{
          margin:28rpx 0;
        }
        .textarea{
          width: 88%;
          height: 200rpx;
          background: #FFFFFF;
          border-radius: 8rpx;
          border: 2rpx solid #EEEEEE;
          padding:24rpx;
          textarea{
            width: 100%;
            height: 100%;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
          }        
        }
      }
    }
  }
  .tab_box{
    margin:24rpx 32rpx 0 32rpx;
    background: #fff;
    border-radius: 16rpx;
    padding-bottom:1rpx;
    .name{
      height: 86rpx;
      line-height: 86rpx;
      border-bottom:1px solid #F2F1F4;
      padding-left:32rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
    .nr{
      margin:28rpx 32rpx 10rpx 32rpx;
      .box1{
        display: inline-block;
        width: 190rpx;
        height: 180rpx;
        background: #FFFFFF;
        border: 2rpx solid #EEEEEE;
        border-radius: 10rpx;
        margin-right:20rpx;
        margin-bottom:24rpx;
        &:nth-child(3n){
          margin-right:0;
        }
        .roomName{
          height: 80rpx;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #110000;
          padding:30rpx 22rpx 0 22rpx;
          margin-bottom:10rpx;
        }
        .status{
          height: 38rpx;
          line-height: 38rpx;
          font-size: 22rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #00C200;
          margin:6rpx 22rpx 0 22rpx;
        }
        .on_height{
          }
        .tab_on1{
          .status{
            color:#FF5919;
          }
        }
        .tab_on2{
          height: 100%;
          background: #F8F8F8;
          .status{
            width: 120rpx;
            
            background: linear-gradient(270deg, #00C200 0%, #4CE44C 100%);
            border-radius: 8rpx;
            color:#fff;
            text-align: center;
          }
        }
        .tab_on4{
          height: 100%;
          background: #F8F8F8;
          .status{
            color:#999999;
          }
        }
        .tab_on3{
          .status{
            color:#999999;
          }
        }
        &.on{
          background: linear-gradient(270deg, #00C200 0%, #4CE44C 100%);
          .roomName{
            color:#fff;
          }
          .status{
            color:#fff;
          }
        }
      }
    }
  }
  .play_msg{
    margin:24rpx 32rpx 0 32rpx;
    background: #fff;
    padding:32rpx 32rpx 0 32rpx;
    border-radius: 16rpx;
    .title{
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
      margin-bottom:10rpx;
    }
    img{
      width: 36rpx;
      height: 36rpx;
      margin-right:16rpx;
    }
    .nr{
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #111111;
      div{
        justify-content: end;
        padding-left:0;
        font-weight: 500;
        flex: 1;
        p{
          height: auto;
          padding-left:0;
          border-bottom:none;
          display: flex;
          align-items: baseline;
          color:#323233 !important;
          font-size:28rpx;
        }
        img{
          width: 40rpx;
        }
      }
    }
    .box1{
      /deep/ .van-radio{
        justify-content: space-between;
        height: 96rpx;
        align-items: center;
        border-bottom:1px solid #F2F1F4;
      }
      /deep/ .van-radio__icon--checked{
        background: #00C200;
        border-color:#00C200;
      }
      /deep/ .van-radio__label{
        flex: 1;
      }
    }
  }

  .button_box1{
    width: 100%;
    height: 144rpx;
    margin-top:32rpx;
    .box1{
      padding:0 32rpx;
      width: 92%;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: fixed;
      bottom:0;
      left:0;
      box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
      background: #fff;
      .price_box1{
        .price{
          color:#00C200;
          display: flex;
          align-items: baseline;
          font-size:30rpx;
          .totle1{
            font-size:30rpx !important;
            font-weight: 400 !important;
            color:#00C200;
            position: relative;
            top:6rpx !important;
          }
          span{
            font-size:52rpx;
            position: relative;
            top:2rpx;
            font-weight: 500;
          }
          /deep/.van-loading__spinner {
            color:#00C200 !important;
            width: 50rpx !important;
            height: 50rpx !important;
          }

        }
      }
      .price{
        font-size:30rpx;
        text-align: right;
        margin-right: 20px;
        display: flex;
        span{
          font-size: 46rpx;
          font-weight: 500;
          
        }
      }
    }
    .button{
      background: #222222;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
      height: 96rpx;
      width: 90%;
      line-height: 96rpx;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .button::after{
      border:none;
    }
  }
  .button_box{
    width: 100%;
    height: 146rpx;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    // ededed
    box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
    .box1{
      width: 92%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      
      .button{
        border:none;
        width: 216rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #222;
        border-radius: 4rpx;
        text-align: center;
        color: #fff;
        font-size: 30rpx;
      }
      .meituan{
        margin-right:30rpx;
        background: linear-gradient(to right, #FFDD48 50%, #FCCA4E 100%);
        color:#333;
      }
    }
  }
}
</style>